<!--下拉联动 optionList :props="propsCascader"-->
<template>
  <el-cascader
    v-model="value"
    v-bind="$attrs"
    :clearable="clearable"
    :size="size"
    :options="myoptionList"
    :filter-method="filterMethod"
    filterable
    :props="propsCascader"
  >
  </el-cascader>
</template>

<script>
  import { computed, defineComponent, reactive } from 'vue'
  import { ElCascader } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import {
    itemProps,
    itemController, 
    getChildrenOne,
    getChildren,
    shallowToDeep,
    // cascaderManage,
    loadController
  } from '../../map'

  const fooTree = [
    { parentId: 'zhinan', level:1, value: 'shejiyuanze', label: '设计原则' },
    { parentId: 'zhinan', level:2, value: 'shejiyuanze', label: '设计原则' },
    { parentId: 'zhinan', level:3, value: 'shejiyuanze', label: '设计原则' }
  ]

  const foo = {
    levelName: ['foo1', 'foo2', 'foo3'],
    foo1: [
      { value: 'zhinan', label: '指南' },
      { value: 'zujian', label: '组件' },
      { value: 'ziyuan', label: '资源' }
    ],
    foo2: [
      { parentId: 'zhinan', value: 'shejiyuanze', label: '设计原则' },
      { parentId: 'zhinan', value: 'daohang', label: '导航', leaf: true },
      { parentId: 'zujian', value: 'basic', label: 'basic', leaf: true },
      { parentId: 'zujian', value: 'form', label: 'form', leaf: true }
    ],
    foo3: [
      { parentId: 'shejiyuanze', value: 'yizhi', label: '一致', leaf: true },
      { parentId: 'shejiyuanze', value: 'fankui', label: '反馈', leaf: true }
    ]
  }

  const foo2 = [
    { parentId: '', value: 'zhinan', label: '指南' },
    { parentId: '', value: 'zujian', label: '组件' },
    { parentId: '', value: 'ziyuan', label: '资源' },
    { parentId: 'zhinan', value: 'shejiyuanze', label: '设计原则' },
    { parentId: 'zhinan', value: 'daohang', label: '导航', leaf: true },
    { parentId: 'zujian', value: 'basic', label: 'basic', leaf: true },
    { parentId: 'zujian', value: 'form', label: 'form', leaf: true },
    { parentId: 'shejiyuanze', value: 'yizhi', label: '一致', leaf: true },
    { parentId: 'shejiyuanze', value: 'fankui', label: '反馈', leaf: true }
  ]

const cascaderManage = (props) => {
  const levelName = props.formItemMeta.colName.split('_')

  // 不需要动态联动
  const noLazy = {
    // checkStrictly: true,
    lazy: false
  }

  // 需要动态联动
  const propsCascader = reactive({
    // multiple: false, // 单选还是多选 多选返回 value 的二维数组
    lazy: true, // 动态级联
    lazyLoad (node, resolve) { // 响应函数resolve
    console.log(node)
      const { level } = node
      // 判断级数是否超过数组下标
      if (levelName.length >= level) {
        // 找到子数据-
        const key = levelName[level]
        const newNode = [{
          value: '222',
          label: '选项11',
          leaf: true
        }]
        // const newNode = data[key].filter((item) => item.parentId === node.value)
        resolve(newNode) // 交给组件
      } else {
        resolve([{
          value: '22',
          label: '选项11',
          leaf: true
        }])
      }
    }
  })
  return { propsCascader: noLazy }
  // return {    propsCascader  }
}


export default defineComponent({
  name: 'el-from-item-select-cascader',
  inheritAttrs: false,
  components: {
    ElCascader
  },
  props: {
    ...itemProps, // 基础属性
    optionKind: {
      type: String,
      default: 'deep' // deep 前端嵌套风格； shallow 后端浅层多数组风格
    },
    cascaderProps: { // cascader 的 props
      type: String,
      default: () => { return {} }
    },
    modelValue: [String, Number, Array]
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    const {
      propsCascader
    } = cascaderManage(props)

    const { value } = itemController(props, context.emit)
    const filterMethod = (node, value) => {
    }

    // const newOpt = shallowToDeep(foo)

    const newOpt2 = getChildrenOne(foo2, '', 0)

    const optionList = props.formItemMeta.optionList

    const myoptionList = computed(() => {
      if (Array.isArray(optionList)){
        // 数组类型
        // 没有数据
        if (optionList.length === 0) return optionList

        // 原生模式
        if (optionList[0].children) 
          return optionList

        // 单表
        if (typeof optionList[0].parentId !== 'undefined')
          return getChildrenOne(optionList, '', 0)

        if (typeof optionList[0] === 'object') {
          // 多表
          return shallowToDeep(optionList[0])
        }
      }
    })

    // 从后端获取数据
    const { loadDict } = loadController(props)
    loadDict()

    // 监听联动的值的变化

/**
 * 来源：json 、后端API、第三方API、前端缓存
 * 结构：前端风格、多层，后端多表，后端单表
 * 完整度：完整，需要根据选项动态加载。
 * 
 */
    return {
      propsCascader,
      myoptionList,
      newOpt: newOpt2,
      filterMethod,
      value
    }
  }
})
</script>
